<template>
  <div class="switchButton" :style="{background:open?'#FFD037':'#1C2933'}" @click="switchBtn">
      <div :style="{left:open?'.17rem':'.02rem',background:open?'#fff':'#7EA1BD'}"></div>
  </div>
</template>

<script>
export default {
    props:{
        open:{
            default:true
        }
    },
    methods:{
        switchBtn(){
            this.$emit('switchTrend');
            if(this.open){
                this.switchAnimation = 'open'
            }else{
                this.switchAnimation = 'close'
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.switchButton{
    display: inline-block;
    height: .2rem;
    width: .35rem;
    border-radius: .1rem;
    background: #1C2933;
    position: relative;
    >div{
        height: .16rem;
        width: .16rem;
        border-radius: 50%;
        background: #7EA1BD;
        position: absolute;
        top: 50%;
        transform: translate(0,-50%);
        left: .02rem;
    }
}
@keyframes switchOpenAnimation{
    0%{
        transform: translate(0,0);
    }
    100%{
        transform: translate(100%,0);
    }
}
@keyframes switchCloseAnimation{
    0%{
        transform: translate(100%,0);
    }
    100%{
        transform: translate(0,0);
    }
}
</style>